<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/date_input.css">
	<link rel="stylesheet" type="text/css" href="../css/common-list.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/jquery.date_input.pack.js"></script>
	<header>
		<div class="header-con">
			<a class="navbar-header" href="">
				<img src="../images/logo.png" alt="">
			</a>
			<ul>
				<li>
					<a href="" class="open-menu">首页</a>
				</li>
				<li>
					<a href="">人资管理</a>
				</li>
				<li>
					<a href="">指标设置</a>
				</li>
				<li>
					<a href="">数据统计</a>
				</li>
				<li>
					<a href="">工作时设置</a>
				</li>
				<li>
					<a href="">财务管理</a>
				</li>
			</ul>
		</div>
		<div class="peo-message">
			<div class="peo-cir">
				<!-- <img src="" alt=""> -->
			</div>
			<em>黑披士</em>
			<span class="down-list"></span>
			<!-- <ul>
				<li>123</li>
			</ul> -->
		</div>
	</header>
	<div class="boxed clearfix">
		<div class="common-tit">
			<h2>财务统计</h2>
			<span>财务管理 > 财务统计</span>
		</div>
		<div class="ad-box">
			<div class="atten-box clearfix">
				<div class="atten-sel">收入<em></em></div>
				<div>支出<em></em></div>
			</div>
			<div class="fina-stacon sel-stacon">
				<ul class="stati-box">
					<li class="statis">
						<div class="stati-tit">
							<strong>时间:</strong>
						</div>
						<div class="list-box">
							<div class="downbtn">
								<span>时间选择-年月日</span>
								<em></em>
							</div>
							<ul class="dropdown-menu">
								<li>测试测试</li>
								<li>我们</li>
								<li>测试测试测试</li>
								<li>asdfasdfsaf	</li>
							</ul>
						</div>
					</li>
					<li class="statis">
						<div class="stati-tit">
							<strong>收入类型:</strong>
						</div>
						<div class="list-box">
							<div class="downbtn">
								<span>请选择</span>
								<em></em>
							</div>
							<ul class="dropdown-menu">
								<li>主营业务收入</li>
								<li>营业外收入</li>
								<li>其他业务收入</li>
							</ul>
						</div>
					</li>
					<li class="statis">
						<div class="stati-tit">
							<strong>选择分店:</strong>
						</div>
						<div class="multiselect-box">
							<div class="mul-downbtn">
								<em></em>
								<input type="text" placeholder="搜索">
							</div>
							<div class="multiselect-down">
								<ul>
									<li>
										<span></span>
										<strong>测试1</strong>
									</li>
									<li>
										<span></span>
										<strong>测试2</strong>
									</li>
									<li>
										<span></span>
										<strong>测试3</strong>
									</li>
									<li>
										<span></span>
										<strong>测试4</strong>
									</li>
									<li>
										<span></span>
										<strong>测试5</strong>
									</li>
									<li>
										<span></span>
										<strong>测试6</strong>
									</li>
									<li>
										<span></span>
										<strong>测试7</strong>
									</li>
									<li>
										<span></span>
										<strong>测试8</strong>
									</li>
									<li>
										<span></span>
										<strong>测试10</strong>
									</li>
								</ul>
								<div class="mul-btn clearfix">
									<div class="mul-confirm">确认</div>
									<div class="mul-cancel">取消</div>
								</div>
							</div>
						</div>
					</li>
					<li class="statis">
						<div class="stati-tit">
							<strong>收入款项:</strong>
						</div>
						<input type="text" onkeyup="clearTow(this)">	
						<span>元</span>
					</li>
					<li>
						<div class="stati-tit">
							<strong>备注:</strong>
						</div>
						<input type="text">
					</li>
				</ul>
				<div class="pay-btn">确认</div>
			</div>
			<div class="fina-stacon">
				<ul class="stati-box">
					<li class="statis">
						<div class="stati-tit">
							<strong>时间:</strong>
						</div>
						<div class="list-box">
							<div class="downbtn">
								<span>时间选择-年月日</span>
								<em></em>
							</div>
							<ul class="dropdown-menu">
								<li>测试测试</li>
								<li>我们</li>
								<li>测试测试测试</li>
								<li>asdfasdfsaf	</li>
							</ul>
						</div>
					</li>
					<li class="statis">
						<div class="stati-tit">
							<strong>支出类型:</strong>
						</div>
						<div class="list-box">
							<div class="downbtn">
								<span>请选择</span>
								<em></em>
							</div>
							<ul class="dropdown-menu">
								<li>产品成本</li>
								<li>管理成本</li>
								<li>营销成本</li>
								<li>学员退费</li>
								<li>其他业务成本</li>
							</ul>
						</div>
					</li>
					<li class="statis">
						<div class="stati-tit">
							<strong>选择分店:</strong>
						</div>
						<div class="multiselect-box">
							<div class="mul-downbtn">
								<em></em>
								<input type="text" placeholder="搜索">
							</div>
							<div class="multiselect-down">
								<ul>
									<li>
										<span></span>
										<strong>测试1</strong>
									</li>
									<li>
										<span></span>
										<strong>测试2</strong>
									</li>
									<li>
										<span></span>
										<strong>测试3</strong>
									</li>
									<li>
										<span></span>
										<strong>测试4</strong>
									</li>
									<li>
										<span></span>
										<strong>测试5</strong>
									</li>
									<li>
										<span></span>
										<strong>测试6</strong>
									</li>
									<li>
										<span></span>
										<strong>测试7</strong>
									</li>
									<li>
										<span></span>
										<strong>测试8</strong>
									</li>
									<li>
										<span></span>
										<strong>测试10</strong>
									</li>
								</ul>
								<div class="mul-btn clearfix">
									<div class="mul-confirm">确认</div>
									<div class="mul-cancel">取消</div>
								</div>
							</div>
						</div>
					</li>
					<li class="statis">
						<div class="stati-tit">
							<strong>支出款项:</strong>
						</div>
						<input type="text">	
						<span>元</span>
					</li>
					<li>
						<div class="stati-tit">
							<strong>备注:</strong>
						</div>
						<input type="text">
					</li>
				</ul>
				<div class="pay-btn">确认</div>
			</div>
		</div>	
	</div>
	
	<script src="../js/common-list.js"></script>
	<script>
		/* 单选下拉列表 */
		$(".single-downbtn").on("click", function() {
			if ($(this).next(".single-dropdown").hasClass("menuopen")) {
				$(this).next(".single-dropdown").removeClass("menuopen");
			} else {
				$(this).next(".single-dropdown").addClass("menuopen");
				$(this).parent().hover(function() {
					
				}, function() {
					$(this).children(".single-dropdown").removeClass("menuopen");
				});
				$(".single-box .menuopen li").on("click", function() {
					$(this).parent().parent().removeClass("menuopen");
					$(this).parent().parent().parent().find("span").text($(this).text());
					$(this).parent().parent().find("input").val("");
					$(".single-dropdown li").removeClass("mul-hide");
				});
				$(this).next("div").find("input").on('input',function(){ 
					console.log($(this));
					if ($(this).val() != "") {
				  		console.log($(this).val());
				  		$(".single-dropdown li").addClass("mul-hide");
				  		console.log($($(".single-dropdown li:contains(" + $(this).val() + ")")).removeClass("mul-hide"));
					} else {
						$(".single-dropdown li").removeClass("mul-hide");
					}
				})
			}
		}); 
		// 多选
		$(".mul-downbtn").on("click", function() {
			if (!$(this).next().hasClass("menuopen")) {
				$(this).next().addClass("menuopen");
			}
		});
		$(".multiselect-down li").on("click", function() {
			if ($(this).hasClass("mul-select")) {
				$(this).removeClass("mul-select");
			} else {
				$(this).addClass("mul-select");
			};
		});
		$(".mul-confirm").on("click", function() {
			var arr = [];
			for (var i = 0; i < $(this).parent().parent().find(".mul-select").length; i++) {
				arr.push($($(this).parent().parent().find(".mul-select")[i]).children("strong").text());
			};
			console.log(arr);
			// 在此处加入ajax 提交数据
			$(this).parent().parent().removeClass("menuopen");
		})
		$(".mul-cancel").on("click", function() {
			$(this).parent().parent().removeClass("menuopen");
		})
		$(".mul-downbtn input").on('input',function(e){
			if ($(this).val() != "") {
		  		// console.log($(this).val());
		  		$(".multiselect-down li").addClass("mul-hide");
		  		$($(".multiselect-down li:contains(" + $(this).val() + ")")).removeClass("mul-hide");
			} else {
				$(".multiselect-down li").removeClass("mul-hide");
			}
		}); 
		$(".atten-box div").on("click", function() {
			$(this).addClass("atten-sel").siblings().removeClass("atten-sel");
			$(".fina-stacon").eq($(this).index()).addClass("sel-stacon").siblings().removeClass("sel-stacon");
		})
	</script>
</body>
</html>